import React from 'react';
import { Row, Col, Table } from 'antd';
import { FEE_TYPE } from '../../../../../utils/constant';

const Base = (props) => {
  const { value } = props;

  const getBasicList = () => {
    const { priceJson } = value;
    const tempObj = priceJson ? JSON.parse(priceJson) : {};
    const { type, price, date, total, gradientList } = tempObj;

    const columns = [
      {
        title: '计费数量下限',
        dataIndex: 'min',
      },
      {
        title: '计费数量上限',
        dataIndex: 'max',
      },
      {
        title: '计费单价',
        dataIndex: 'price',
      },
    ];

    return [
      {
        label: '接口名称',
        value: value.name,
      },
      {
        label: 'ID',
        value: value.id,
      },
      {
        label: '接口标识',
        value: value.flag,
      },
      {
        label: '接口分组',
        value: value.groupIdLabel,
      },
      {
        label: '限流',
        value: value.isRateLimitLabel,
      },
      value.isRateLimit && {
        label: '流量',
        value: value.rateMax + '次/分',
      },
      value.dataSourceType !== 1 && {
        label: '计费方式',
        value: FEE_TYPE[value.feeType],
      },
      value.dataSourceType !== 1 &&
        value.feeType && {
          label: '计费规则',
          value:
            value.feeType === 1 ? (
              <>
                {type ? '查询计费' : '查得计费'} {price} 元/次
              </>
            ) : value.feeType === 2 ? (
              <>时间: {date}</>
            ) : value.feeType === 3 ? (
              <>
                总次数: {total} 有效期: {date}
              </>
            ) : value.feeType === 4 ? (
              <Table pagination={false} columns={columns} dataSource={gradientList} />
            ) : (
              ''
            ),
        },
      {
        label: '接口描述',
        value: value.desc,
      },
    ].filter(Boolean);
  };

  const getBasicNodes = () => {
    const baseData = getBasicList(value);
    const basicNodes = baseData.map(({ span, label, value }, index) => (
      <Col key={index} span={span ? span : 6} style={{ marginBottom: '20px' }}>
        <p style={{ marginBottom: '10px' }}>{label}</p>
        <p style={{ color: 'rgba(114,123,141,1)' }}>{(value || value === 0) ? value : '-'}</p>
      </Col>
    ));
    return <Row>{basicNodes}</Row>;
  };

  return getBasicNodes();
};
export default Base;
